<template>
  <button
    class="cu-btn"
    @click="handlerClick"
    :disabled="disabled"
    :class="[
            roundClass,
            size,
            bgClass,
            shadowClass,
            lineClass,
            blockClass
        ]"
  >
    <slot></slot>
  </button>
</template>
<script>
import isEmpty from "lodash/isEmpty";
// 全局颜色枚举
const COLOR_ENUMS = [
  "red",
  "orange",
  "yellow",
  "olive",
  "green",
  "cyan",
  "blue",
  "purple",
  "mauve",
  "pink",
  "brown",
  "grey",
  "gray",
  "black",
  "white"
];

// 按钮尺寸枚举
const BUTTON_SIZE_ENUMS = ["", "sm", "lg"];

const COMPONENT_NAME = "CButton";

export default {
  name: COMPONENT_NAME,
  props: {
    round: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: ""
    },
    bg: {
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: "red",
      validator: function(color) {
        return COLOR_ENUMS.some(c => c === color);
      }
    },
    shadow: {
      type: Boolean,
      default: false
    },
    line: {
      type: Boolean,
      default: false
    },
    bigLine: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    block: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    roundClass() {
      return this.round ? "round" : "";
    },
    lineClass() {
      let className = "";
      if (this.line) {
        className = "line";
        if (this.bigLine) {
          className += "s";
        }
        if (this.color !== "") {
          className += `-${this.color}`;
        }
      }
      return className;
    },
    bgClass() {
      let className = "";
      if (this.bg && this.color) {
        className = `bg-${this.color}`;
      }
      return className;
    },
    shadowClass() {
      return this.shadow ? "shadow" : "";
    },
    blockClass() {
      return this.block ? "block" : "";
    }
  },
  methods: {
    handlerClick() {
      this.$emit("click");
    }
  },
  created(){
    console.log(isEmpty({}));
  }
};
</script>